<template>

	<view class="tab-bar">
		<u-tabbar :value="currentIndex" style="z-index: 9999999 !important;" :fixed="false" activeColor="#51d0d0"
			v-if="backData.length > 0" :midButton="true" inactiveColor="#707070" @change="switchTabbar">
			<u-tabbar-item v-for="(item,index) in backData" :text="item.APFunName" :name="item.APFunName"
				:key="item.APFunName" :icon="currentIndex===item.APFunName ? item.activeIcon : item.inactiveIcon">
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		props: ['backData'],
		data() {
			return {
				currentIndex: this.$store.state.GuyueModule.MesBasicInfo.TabBarName || '首页',
			}
		},

		methods: {
			switchTabbar(e) {
				var that = this

				const obj = that.backData.find(item => item.APFunName == e)
				that.currentIndex = obj.APFunName
				if (that.currentIndex != this.$store.state.GuyueModule.MesBasicInfo.TabBarName) {
					that.$store.state.GuyueModule.MesBasicInfo.TabBarName = obj.APFunName

					that.$store.commit('GuyueModule/ChangeAndSetStateData', {
						Name1: 'MesBasicInfo',
						data: that.$store.state.GuyueModule.MesBasicInfo
					})

					uni.redirectTo({
						url: obj.AP_Link,
						animationType: 'slide-in-right', // 动画类型
						animationDuration: 500 // 动画时长
					});
				}

			}
		}
	};
</script>

<style scoped>
	.tab-bar {
		display: flex;
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 10px 0;
	}
</style>